<template>
  <div>
    <div class="full">
      <div class="container">
        <div class="warp">
          <!-- 左侧导航栏 -->
          <div class="warp-left">
            <div class="establish">
              <span class="warp-meat">视频</span>
              <span class="number establish-number">{{ Contribution.page?.count }}</span>
            </div>
            <div class="conversation favorites">
              <span class="warp-meat">音频</span>
              <span class="number">0</span>
            </div>
            <div class="special favorites">
              <span class="warp-meat">专栏</span>
              <span class="number">0</span>
            </div>
            <div class="special-column favorites">
              <span class="warp-meat">相簿</span>
              <span class="number">0</span>
            </div>
          </div>
          <!-- 右侧内容 -->
          <div class="warp-right" v-loading="loading">
            <!-- 右侧中间样式 -->
            <div class="conte">
              <div class="header-footer">
                <div class="fav-filters">
                  <div class="fav-filters-text">
                    <span class="filters-sp">我的视频</span>
                  </div>
                  <div
                    class="fav-filters-text fav-cen"
                    :class="currentOrder === 'pubdate' && 'active'"
                    @click="currentOrder = 'pubdate'"
                  >
                    <span>最新发布</span>
                  </div>
                  <div
                    class="fav-filters-text fav-cen"
                    :class="currentOrder === 'click' && 'active'"
                    @click="currentOrder = 'click'"
                  >
                    <span>最多播放</span>
                  </div>
                  <div
                    class="fav-filters-text fav-cen"
                    :class="currentOrder === 'stow' && 'active'"
                    @click="currentOrder = 'stow'"
                  >
                    <span>最多收藏</span>
                  </div>
                </div>
              </div>
              <div class="fav-icon">
                <div>
                  <span>
                    <el-icon class="grid" :size="20"><Grid /></el-icon>
                  </span>
                </div>
                <div>
                  <span>
                    <el-icon class="fold" :size="20"><Fold /></el-icon>
                  </span>
                </div>
              </div>
            </div>
            <!-- 横条 -->
            <div class="bar">
              <div class="bar-qb" @click="currentTid = 0" :class="currentTid === 0 && 'active'">
                <span>
                  全部：{{
                    Object.values(Contribution.list.tlist)
                      .map((item) => item.count)
                      .reduce((prev, curr) => prev + curr)
                  }}
                </span>
              </div>
              <div
                class="bar-qb"
                :class="currentTid === item.tid && 'active'"
                v-for="item in Contribution.list.tlist"
                :key="item.tid"
                @click="currentTid = item.tid"
              >
                <span>{{ item.name }}：{{ item.count }}</span>
              </div>
            </div>
            <!-- 右侧底部样式 -->
            <div class="list">
              <div class="video-container" v-for="item in Contribution.list.vlist" :key="item.aid">
                <div class="video-list">
                  <img class="video-img" :src="item.pic" alt="" />
                </div>
                <div class="video-text">
                  {{ item.title }}
                </div>
                <div class="video-text-bottom">
                  <div class="caret-right">
                    <el-icon class="icon"><caret-right /></el-icon>
                    <span>{{ localNum(item.play, 1) }}</span>
                  </div>
                  <div class="caret-right">
                    <span>{{ moment(item.created * 1000).format('YYYY-MM-DD') }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 分页器 -->
            <div class="demo-pagination-block">
              <ElPagination
                background
                v-model:currentPage="currentPage"
                :page-size="30"
                layout="prev, pager, next"
                :total="total"
              />
              <!-- :total="Contribution.list.tlist['0'].count" -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, reactive, watch, onUnmounted } from 'vue'
  import { useRoute } from 'vue-router'
  import { reqContribution } from '@/api/contribution'
  import { ContributionModel, OrderType } from '@/api/contribution'

  export default defineComponent({
    name: 'Contribution',
  })
</script>

<script lang="ts" setup>
  import { Grid, Fold, CaretRight } from '@element-plus/icons'
  import { localNum } from '@/utils/lib'
  import { useBackTop, useClearBackTop } from '@/hook/backTop'
  import moment from 'moment'
  const route = useRoute()

  const hostMid = Number(route.query.hostMid)

  const Contribution = reactive<ContributionModel>({
    page: {
      pn: 1,
      ps: 30,
      count: 0,
    },
    list: {
      tlist: {
        '0': { count: 0, tid: 0, name: '全部' },
      },
      vlist: [],
    },
  })

  const currentTid = ref(0)
  const currentOrder = ref<OrderType>('pubdate')
  const currentPage = ref(1)
  const total = ref(0)

  const loading = ref(false)

  async function getContribution(pn = 1, tid = 0, order: OrderType = 'pubdate') {
    loading.value = true
    const { page, list } = await reqContribution(hostMid, pn, tid, order)
    Contribution.page = page
    Contribution.list = list
    if (tid === 0) {
      total.value = Contribution.page.count
    } else {
      total.value = Contribution.list.tlist[tid]?.count || 0
    }
    loading.value = false
  }

  onMounted(async () => {
    getContribution()
  })

  watch(currentPage, (newPn) => {
    if (newPn === Contribution.page?.pn) return
    useBackTop()
    getContribution(newPn, Number(currentTid.value))
  })

  watch(currentTid, (newTid) => {
    getContribution(Contribution.page.pn, newTid)
  })

  watch(currentOrder, (newOrder) => {
    getContribution(Contribution.page.pn, currentTid.value, newOrder)
  })

  onUnmounted(() => useClearBackTop())
  // const handleSizeChange = (val: any) => {
  //   console.log(`${val} items per page`)
  // }
  // const handleCurrentChange = (val: any) => {
  //   console.log(`current page: ${val}`)
  // }
</script>

<style lang="less" scoped>
  .full {
    width: 100%;
    min-width: 1200px;
    // margin-top: 0;

    .container {
      width: 1200px;
      margin: 0 auto;
      background-color: #fff;
    }
    .warp {
      display: flex;
      width: 1200px;
      // height: 518px;
      margin: 0;
      border: 1px solid #eaebecf6;
      box-sizing: border-box;
    }
    .warp-left {
      width: 229px;
      height: 206px;
    }
    .establish {
      width: 100%;
      height: 54px;
      line-height: 54px;
      font-size: 14px;
      color: #99a2aa;
      text-align: center;
      .arrow {
        position: absolute;
        right: 20px;
        top: 20px;
      }
    }
    .establish,
    .establish-number {
      color: #fff !important;
      background-color: #00a1d6 !important;
    }
    .favorites,
    .establish {
      position: relative;
      display: flex;
      width: 100%;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 14px;
      color: #222;
      margin-right: 5px;
      cursor: pointer;
      .number {
        display: block;
        position: absolute;
        width: 32px;
        height: 20px;
        right: 5px;
        top: 13px;
        font-size: 14px;
        color: #99a2aa;
        line-height: 20px;
        text-align: center;
        padding: 0 10px;
        // border: 1px solid;
      }
    }
    .favorites:hover {
      color: #00a1d6;
    }
    .warp-meat {
      display: block;
      padding-left: 30px;
    }
    .later {
      display: block;
      box-sizing: border-box;
      padding-right: 70px;
      color: #99a2aa;
      border-top: 1px solid #e4e9f0;
      border-bottom: 1px solid #e4e9f0;
    }
    // 右侧内容样式
    .warp-right {
      width: 971px;
      // height: 518px;
      padding: 20px;
      border: 1px solid #e4e9f0;
      box-sizing: border-box;
    }
    // 右侧中间样式
    .conte {
      display: flex;
    }
    .header-footer {
      position: relative;
      width: 100%;
      height: 28px;
      // margin: 15px 20px 0 20px;
    }
    .fav-filters {
      position: absolute;
      display: flex;
      line-height: 30px;
      // border: 1px solid;
    }
    .filters-sp {
      font-size: 20px !important;
    }
    .fav-filters-text {
      margin-right: 26px;
      color: #222;
      font-size: 12px;
      cursor: pointer;
      &.active {
        color: #00a1d6;
        border-bottom: 1px solid #00a1d6;
      }
    }
    .fav-cen:hover {
      color: #00a1d6;
    }
    .fav-icon {
      display: inline-block;
      position: relative;
    }
    .grid {
      position: absolute;
      right: 25px;
      width: 20px;
      height: 20px;
      position: absolute;
      color: #00a1d6;
    }
    .fold {
      width: 20px;
      height: 20px;
      .fold:hover {
        color: #00a1d6;
      }
    }
    // 横条
    .bar {
      display: flex;
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      background-color: rgba(192, 191, 191, 0.5);
      border-radius: 5px;
      margin: 10px 0;
      box-sizing: border-box;
    }
    .bar-qb {
      margin-right: 20px;
      cursor: pointer;

      &.active {
        color: #00a1d6 !important;
      }
    }
    // 右侧底部
    .list {
      overflow: hidden;
      width: 950px;
      // height: 350px;
    }
    .video-container {
      display: inline-block;
      width: 160px;
      height: 166px;
      margin: 0 30px 20px 0;
      cursor: pointer;
      // border: 1px solid;
    }
    .video-list {
      width: 160px;
      height: 100px;
      position: relative;
      .video-img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }
    .video-text {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      width: 158px;
      height: 36px;
      color: #222;
      font-size: 12px;
      margin-top: 6px;
    }
    .video-text-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 158px;
      height: 14px;
      line-height: 14px;
      color: #999;
      font-size: 12px;
      margin-top: 6px;
    }
    .caret-right {
      // padding-right: 15px;
      display: flex;
      align-items: center;
    }
    .icon {
      margin-right: 3px;
      border-radius: 4px;
      background-color: #999;
      color: #fff;
      transform: scale(0.9);
    }
    // 分页器
    .demo-pagination-block {
      margin-top: 25px;
      text-align: center;
    }
  }
</style>
